<script lang="ts" setup>
  import { reactive } from 'vue';
  import Checkbox from '@sscd/checkbox';
  const plainOptions = ['Apple', 'Pear', 'Orange'];
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange' },
  ];
  const optionsWithDisabled = [
    { value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange', disabled: false },
  ];
  const state = reactive({
    value1: [],
    value2: ['Apple'],
    value3: ['Pear'],
    value4: ['Apple'],
  });
</script>

<template>
  <div class="demo">
    <div class="demo-title">Checkbox 组</div>
    <div class="demo-content">
      <Checkbox.Group v-model:value="state.value1" name="checkboxgroup" :options="plainOptions" />
        <br />
        <br />
        <Checkbox.Group v-model:value="state.value2" :options="plainOptions" />
        <br />
        <br />
        <Checkbox.Group v-model:value="state.value3" :options="options" />
        <br />
        <br />
        <Checkbox.Group v-model:value="state.value4" :options="optionsWithDisabled" disabled>
          <template #label="{ value }">
            <span style="color: red">{{ value }}</span>
          </template>
        </Checkbox.Group>
    </div>
  </div>
</template>
